<template>
  <div>
    <div v-if="step === 0" class="choose-container">
      <div v-if="userList.length > 0" class="choose-title">请选择登录的账号</div>
      <div v-for="(users, index) in userList" :key="index" class="biz-wrap">
        <div class="biz-title" @click="handleClick(index)">
          <span class="business-name">{{ users[0].name }}</span>
          <img v-if="openIndex === index" src="../../assets/icon/btn_down@2x.png" class="right-icon open"/>
          <img v-else src="../../assets/icon/btn_enter_black@2x.png" class="right-icon down"/>
        </div>
        <div v-show="openIndex === index" class="biz-content">
          <div v-for="user in users" :key="user.userId" class="account" @click="handleSelect(user)">
            <div class="title">
              <div v-if="user.shopName" class="shop-name">{{ user.shopName }}</div>
              <div v-else class="shop-name">总部</div>
              <div class="account-name">{{user.accountName}} - {{ user.username }}</div>
            </div>
            <img class="right-icon-2" src="../../assets/icon/btn_enter_hui@2x.png"/>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="login-result">
      <div v-if="loginResult" class="login-success">
        <img class="icon" src="../../assets/icon/icon_success@2x.png"/>
        <div class="title">确认成功</div>
        <div class="msg">{{ user.username }}已成功登录</div>
        <div @click="handleConfirm" class="c-btn">确定</div>
      </div>
      <div v-else class="login-fail">
        <img class="icon" src="../../assets/icon/icon_zhanghao@2x.png"/>
        <div class="msg">{{ errorMsg }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getQueryString} from '@/utils/utils'
  import {chooseLoginUser, getLoginUsers} from "@/api/auth";

  export default {
    filters: {},
    data() {
      return {
        step: 0,
        userList: [],
        openIndex: 0,
        errorMsg: "",
        loginResult: false,
        user: null,
      }
    },
    mounted() {
      this.$toast.show({type: 'loading'});
      this.appId = getQueryString("appid");
      this.code = getQueryString("code");
      this.codeNo = getQueryString("state");
      getLoginUsers({appId: this.appId, code: this.code, codeNo: this.codeNo}).then(resp => {
        this.$toast.hide();
        if (resp.code !== 0) {
          this.step = 1;
          this.errorMsg = resp.msg
          this.loginResult = false;
          return;
        }
        if (!resp.data || resp.data.length <= 0) {
          this.step = 1;
          this.errorMsg = "你还未绑定任何账号"
          this.loginResult = false;
          return;
        }
        this.userList = this.convertList(resp.data);
      }).catch(error => {
        this.$toast.hide();
        this.$toast.message(error);
      })
    },
    methods: {
      convertList(userList) {
        let mp = {};
        for (let i = 0; i < userList.length; i++) {
          let user = userList[i];
          if (user.scope === 2) {
            let temp = mp[user.businessId]
            if (!temp) {
              temp = [];
            }
            temp.push(user);
            mp[user.businessId] = temp;
          } else if (user.scope === 1) {
            let temp = mp[user.spId]
            if (!temp) {
              temp = [];
            }
            temp.push(user);
            mp[user.spId] = temp;
          }
        }
        let rv = []
        for (var i in mp) {
          rv.push(mp[i])
        }
        return rv;
      },
      handleClick(index) {
        if (this.openIndex === index) {
          this.openIndex = null;
        } else {
          this.openIndex = index
        }
      },
      handleSelect(user) {
        this.user = user;
        this.$toast.show({type: 'loading', "txt": "登录中"});
        chooseLoginUser({
          "appId": this.appId,
          "code": this.code,
          "codeNo": this.codeNo,
          "userId": user.userId
        }).then(resp => {
          this.$toast.hide();
          if (resp.code !== 0) {
            this.errorMsg = resp.msg;
            this.loginResult = false
            this.step = 1;
          } else {
            this.loginResult = true;
            this.step = 1;
          }
        })
      },
      handleConfirm() {
        document.addEventListener("WeixinJSBridgeReady", function () {
          // eslint-disable-next-line no-undef
          WeixinJSBridge.call("closeWindow");
        }, false);
        // eslint-disable-next-line no-undef
        WeixinJSBridge.call("closeWindow");
      }
    }
  }
</script>

<style lang="postcss" scoped>
  @import "../../assets/common/svg.css";

  html {
    background: #f8f8f8 !important;
  }

  * {
    box-sizing: border-box;
  }

  .choose-container {
    padding-right: 20px;
    padding-left: 20px;

    & .choose-title {
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;

    }
  }

  .biz-wrap {
    background: #FFFFFF;
    border-radius: 20px;
    margin-bottom: 20px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .biz-title {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32px;
    color: #000;
    border: 0;
    border-bottom: 1px solid;
    border-image: svg(one-px-border param(--color #e6e6e6)) 1 stretch;

    & .right-icon.open {
      width: 37px;
      height: 37px;
      margin-right: 20px;
    }

    & .right-icon.down {
      width: 37px;
      height: 37px;
      margin-right: 20px;
    }
  }

  .business-name {
    margin-left: 26px;
  }

  .account {
    height: 120px;
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #000;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid;
    border-image: svg(one-px-border param(--color #e6e6e6)) 1 stretch;

    &:active {
      background-color: #eee !important;
    }

    & .right-icon-2 {
      width: 32px;
      height: 32px;
      margin-right: 16px;
    }

    &:last-child {
      border-bottom: none;
      border-image: none;
    }

    & .title {
      padding-left: 26px;
      display: flex;
      flex-wrap: wrap;
      flex-flow: column;
      color: #888;
    }

    & .shop-name {
      font-size: 28px;
      line-height: 32px;
      margin-bottom: 10px;
    }

    & .account-name {
      font-size: 22px;
    }
  }

  .login-success {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-flow: column;

    & .icon {
      width: 120px;
      height: 120px;
      margin-top: 120px;
      margin-bottom: 40px;
    }

    & .title {
      font-size: 32px;
      color: #000;
      line-height: 40px;
    }

    & .msg {
      font-size: 28px;
      color: #888;
      margin-top: 45px;
    }

    & .c-btn {
      width: 534px;
      height: 88px;
      border-radius: 44px;
      margin-top: 92px;

      background: #4E86FE;
      color: #FFFFFF;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;

      &:active {
        background: #4e86fe;
        opacity: 0.5;
      }
    }
  }

  .login-fail {
    display: flex;
    align-items: center;
    flex-flow: wrap;
    flex-direction: column;
    padding-left: 60px;
    padding-right: 60px;
    & .icon {
      width: 272px;
      height: 272px;
      margin-top: 200px;
    }

    & .msg {

      text-align: center;
      margin-top: 40px;
      font-size: 32px;
      color: #000;
    }
  }
</style>
